<script setup>
import { useRoute, useRouter } from 'vue-router'
import PostListItemImage from '@/components/PostListItemImage.vue'

const props = defineProps({
  data: Object,
})

const emit = defineEmits(['hidePanel'])

const route = useRoute()
const router = useRouter()
const handleClick = () => {
  // const path = route.path.replace(/\/post.*/, '')
  router.push(`/home/post/${props.data.id}`)
  // router.push(`/topicExplore/post/${props.data.id}`)
  // router.push(`/home/post/${props.data.id}`)

  emit('hidePanel')
}

const formatNumber = (num) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + 'w'
  }
  return num
}

const parseMedia = (media) => {
  if (!media) return null
  // 如果是数组或对象，直接返回
  if (Array.isArray(media) || typeof media === 'object') return media
  // 如果是字符串，尝试解析
  try {
    // 先判断是不是以 [ 或 { 开头，才尝试 parse
    if (typeof media === 'string' && (media.trim().startsWith('[') || media.trim().startsWith('{'))) {
      return JSON.parse(media)
    }
    // 否则直接返回原字符串
    return media
  } catch (e) {
    // 解析失败，直接返回原字符串
    return media
  }
}

const tagColorList = ['primary', 'success', 'warning', 'danger', 'info', 'success', 'warning']
function getDiscussTagColorById(id) {
  if (!id) return tagColorList[0]
  let hash = 0
  const str = String(id)
  for (let i = 0; i < str.length; i++) hash = (hash * 31 + str.charCodeAt(i)) % 100000
  return tagColorList[hash % tagColorList.length]
}

const handleTopicClick = (item) => {
  router.push(`/topic/${item.topicId}`)
}
const handleUserClick = (item) => {
  router.push(`/user/${item.userInfo.uid}`)
}
</script>

<template>
  <div @click="handleClick"
    class="hot-post-card group flex justify-between items-stretch cursor-pointer p-6 gap-6 w-full border-b border-gray-100 bg-gradient-to-br from-[#fafdff] to-[#f3f7fa] rounded-2xl shadow-sm hover:shadow-xl transition-all duration-200 relative overflow-hidden">
    <div class="min-w-0 flex-1 flex flex-col justify-between">
      <div>
        <div class="flex items-center">
          <el-avatar :size="46" :src="data.userInfo?.avatar" class="flex-shrink-0 shadow border border-blue-100" @click.stop="handleTopicClick(data)" />
          <div class="items-center-body">
            <span class="text-base text-blue-900 font-semibold ml-3" @click.stop="handleTopicClick(data)">{{ data.topicName }}</span>
            <span class="text-xs text-gray-400 whitespace-nowrap ml-3" @click.stop="handleUserClick(data)">{{ data.userInfo?.username }}</span>
          </div>
        </div>
        <div class="font-bold text-lg  leading-snug line-clamp-2 hover:text-blue-600 text-blue-700 transition post-top-title">{{
          data.title }}
        </div>
      </div>
    </div>
    <div
      class="flex-shrink-0 flex items-center justify-center w-[120px] h-[120px] rounded-xl overflow-hidden bg-gray-100 border border-gray-200 ml-4">
      <PostListItemImage :type="data.type" :media="parseMedia(data.media)" class="object-cover w-full h-full" />
    </div>
    <div
      class="absolute inset-0 pointer-events-none rounded-2xl group-hover:ring-2 group-hover:ring-blue-200 transition">
    </div>
  </div>
</template>

<style scoped lang="scss">
.hot-post-card {
  max-width: 900px;
  margin: 0 auto 24px auto;
  box-sizing: border-box;

  .post-top-title{
    margin-top: 20px;
  }

  .items-center-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  @media (min-width: 1200px) {
    max-width: 1200px;
    // padding: 32px 38px 16px 38px;
    padding: 12px 18px 6px 18px;
    gap: 32px;
  }

  @media (max-width: 600px) {
    padding: 12px 6px;
    gap: 8px;
    border-radius: 10px;
  }
}
</style>
